<template>
  <div class="loan-application-container">
    <div class="title">
      Repayment
    </div>

    <div class="loan-information">
      <div class="infos-container">
        <div class="info">
          <div class="label">
            Repayment Amount:
          </div>
          <div class="value">
            $ 450.00
          </div>
        </div>
        <div class="info">
          <div class="label">
            Repayment Fees:
          </div>
          <div class="value">
            $ 25.00
          </div>
        </div>
        <div class="info">
          <div class="label">
            Fine for repaying Late:
          </div>
          <div class="value">
            $ 25.00
          </div>
        </div>
        <div class="info">
          <div class="label">
            Loan Duration:
          </div>
          <div class="value">
            14 days
          </div>
        </div>
        <div class="info">
          <div class="label">
            Bank Card:
          </div>
          <div class="value">
            xxxx Bank
          </div>
        </div>
      </div>
    </div>

    <div class="tatal-container">
      TOTAL：$ 475.00
    </div>

    <div class="button-submit">
      <a-button
        type="primary"
        size="large"
        shape="round"
        class="primary-button"
        :loading="formLoading"
        @click="submitLoan"
      >
        Submit
      </a-button>
    </div>
  </div>
</template>

<script>

export default {
  name: 'RepaymentApplication'
};
</script>

<style lang="scss" scoped>
.loan-application-container {
  background-color: $white;
  padding-top: 48px;
  padding-bottom: 87px;
  & > .title {
    text-align: center;
    font-size: 40px;
    margin: $margin-md 0;
    font-weight: bold;
  }

  .loan-information {
    background: rgba(56, 125, 255, 0.03);
    border: 1px solid $gray-18;
    padding: 30px 240px;

    .infos-container {
      .info:nth-last-of-type(1) {
         margin-bottom: 0;
      }
    }
    .infos-container {
      .info {
        display: flex;
        align-items: center;
        font-size: $font-size-lg;
        margin-bottom: $margin-xs;
        .label {
          width: 9.5em;
          text-align: right;
        }
        .value {
          padding: $padding-base;
          background-color: $white;
          flex: 1;
          text-align: right;
          margin-left: $margin-xs;
        }
      }
    }

  }
  .loan-desc-container {
    padding: 0 240px;
    margin-top: $margin-sm;
    .desc:nth-last-child(1) {
      margin-bottom: 0;
    }

    .desc {
      color: $gray-11;
      margin-bottom: $margin-base;
    }
  }

  .tatal-container {
    text-align: center;
    height: 60px;
    line-height: 60px;
    color: $theme-color;
    font-weight: bold;
    font-size: $font-size-lg;
    background: rgba(27, 31, 143, 0.05);
  }
  .button-submit {
    display: flex;
    justify-content: center;
    margin-top: $margin-sm;
    .primary-button {
      width: 420px;
      font-size: $font-size-lg;
    }
  }
}
</style>
